import React, { useEffect, useRef } from 'react';
import { Form, Input, Modal, Select, Row, Col, DatePicker } from 'antd';
import { adminCompanyType, postStatusType } from '@/utils/constant';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
      md: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  useEffect(() => {
    getForm(form);
  }, []);
  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
      width={1024}
    >
      <Form hideRequiredMark style={{ marginTop: 8 }} form={form} name="basic">
        <Row gutter={12}>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入姓名' }]}
              {...formItemLayout}
              label={'姓名'}
              name="name"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请选择性别' }]}
              label={'性别'}
              name="gender"
            >
              <Select>
                <Select.Option value={'男'}>男</Select.Option>
                <Select.Option value={'女'}>女</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入民族' }]}
              label={'民族'}
              name="nation"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择在岗状态' }]}
              {...formItemLayout}
              label={'在岗状态'}
              name="status"
            >
              <Select>
                {postStatusType.map(item => (
                  <Select.Option key={item.value} value={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入身份证号码' }]}
              label={'身份证号码'}
              name="identificationNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入身份证到期时间' }]}
              label={'身份证到期时间'}
              name="idExpiredDate"
            >
              <DatePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入身份证住址' }]}
              label={'身份证住址'}
              name="identificationAddress"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入现住地址' }]}
              label={'现住地址'}
              name="presentAddress"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[
                { required: true, message: '请输入联系电话' },
                {
                  pattern: /^[0-9\(\)\-\+]{11,}$/,
                  message: '请输入正确的联系方式',
                },
              ]}
              {...formItemLayout}
              label={'联系电话'}
              name="phoneNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'紧急联系人'}
              rules={[{ required: true, message: '请输入紧急联系人' }]}
              name="emergencyContact"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'紧急联系人电话'}
              rules={[
                { required: true, message: '请输入紧急联系人电话' },
                {
                  pattern: /^[0-9\(\)\-\+]{11,}$/,
                  message: '请输入正确的联系方式',
                },
              ]}
              name="emergencyContactPhoneNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择入职日期' }]}
              {...formItemLayout}
              label={'入职日期'}
              name="entryDate"
            >
              <DatePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'合同时间'}
              rules={[{ required: true, message: '请选择合同时间' }]}
              name="contractStartDate"
            >
              <DatePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'合同到期时间'}
              rules={[{ required: true, message: '请选择合同到期时间' }]}
              name="contractExpirationDate"
            >
              <DatePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入保险' }]}
              {...formItemLayout}
              label={'保险'}
              name="insurance"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'离职时间'}
              name="departureDate"
            >
              <DatePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择所属公司' }]}
              {...formItemLayout}
              label={'所属公司'}
              name="company"
            >
              <Select>
                {adminCompanyType.map(item => (
                  <Select.Option key={item.value} value={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入工种' }]}
              {...formItemLayout}
              label={'工种'}
              name="jobs"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'待遇'} name="treatment">
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'月休天数'}
              name="restDaysPerMonth"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'备注'} name="remark">
              <Input.TextArea rows={3} />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Detail;
